<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item
        v-for="(item, index) in breadList"
        :key="index"
        :to="item.path ? { path: item.path } : undefined"
      >
        {{ item.meta && item.meta.title ? item.meta.title : item.name }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <br />
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const breadList = ref([])
const route = useRoute()

function updateBread() {
  let matched = route.matched
  // 判断当前路由是否是首页
  if (!matched[0] || matched[0].path !== '/home') {
    matched = [{ path: '/home', meta: { title: '首页' } }].concat(matched)
  }
  breadList.value = matched
}

watch(
  () => route.fullPath,
  () => {
    updateBread()
  },
  { immediate: true }
)

onMounted(() => {
  updateBread()
})
</script>

<style scoped>

</style>
